<template>
      <div>
        <el-row>
      <el-col :span="24" class="addRole">
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="450" style="margin-right:10px;" trigger="click">
          <el-form :inline="true" :model="search">
              <el-form-item label="患者" >
                 <el-autocomplete  class="width220" v-model="search.name" :fetch-suggestions="querySearchAsync" placeholder="请选择患者" @select="handleSelect"></el-autocomplete>
              </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd"/>
           </el-form-item>
              <el-button type="primary" @click="searchBtn">确认</el-button>
              <el-button type="primary" @click="cleanSearch">清空</el-button>
          </el-form>
          <el-button slot="reference" type="primary" icon="el-icon-search">查询</el-button>
        </el-popover>
         <el-button  type="primary" @click="showDialog('insert')">新增</el-button>
      </el-col>
    </el-row>
 <el-table :data="tableList" stripe border class="user-table" :height="tableHeight" style="width: 100%;" v-loading="loading">
      <el-table-column fixed type="index" label="序号" sortable min-width="200"></el-table-column>
      <el-table-column prop="providerInfo.name" label="姓名" sortable width="150"></el-table-column>
      <el-table-column prop="providerInfo.cardId" label="患者治疗号" sortable min-width="150" ></el-table-column>
      <el-table-column prop="registerNo" label="登记号"  width="150"  align="center"> </el-table-column>
      <el-table-column prop="macNurseIsSure" label="机操护士是否确认"  width="150"  align="center">
           <template slot-scope="scope">
                 <span :class="['table-judge',scope.row.macNurseIsSure===1?'el-icon-circle-check cl-success':'']"></span>
            </template>
      </el-table-column>
      <el-table-column prop="macNurseName" label="机操护士"  width="150"  align="center"></el-table-column>

      <el-table-column prop="punctureNurseIsSure" label="穿刺护士是否确认"  width="150"  align="center">
           <template slot-scope="scope">
                 <span :class="['table-judge',scope.row.punctureNurseIsSure===1?'el-icon-circle-check cl-success':'']"></span>
            </template>
      </el-table-column>
      <el-table-column prop="macNurseName" label="穿刺护士"  width="150"  align="center"></el-table-column>
     <el-table-column  prop="creatorName" label="医生"  align="center"></el-table-column>
     <el-table-column  prop="createTime" label="创建时间"  align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  width="160">
        <template slot-scope="scope">
          <el-button @click="showDialog('update',scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
      <!-- 新增或者修改 -->
        <el-dialog class="bodyNopaddingTop" :title="dialog.title" :visible.sync="dialog.isShow"  v-dialogDrag width="1100px" :close-on-click-modal='false'>
        <el-form :model="dialog.formData"  :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm" :inline="true" >
        <el-form-item label="患者姓名" prop="providerInfo.name" >
            <el-autocomplete  class="width220" v-model="dialog.formData.providerInfo.name" :fetch-suggestions="queryRegAsync" placeholder="请选择患者" @select="handleSelectReg"></el-autocomplete> 
        </el-form-item>
         <el-form-item label="患者治疗号" prop="providerInfo.cardId">
          <el-input v-model="dialog.formData.providerInfo.cardId" class="width220" disabled></el-input>
        </el-form-item>
         <el-form-item label="登记号" prop="registerNo">
          <el-input v-model="dialog.formData.registerNo" class="width220" disabled></el-input>
        </el-form-item>
        <el-form-item label="机器操作时间" prop="macNurseOperateTime"  v-if="dialog.type==='update'" >
          <el-date-picker v-model="dialog.formData.macNurseOperateTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"/>
        </el-form-item>
        <el-form-item label="机操护士是否确认" prop="macNurseIsSure"  v-if="dialog.type==='update'" >
          <el-select v-model="dialog.formData.macNurseIsSure"> 
            <el-option label="是" :value=1  > </el-option>
            <el-option label="否" :value=0  > </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机操护士" prop="macNurseName" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.macNurseName" class="width220" disabled></el-input>
        </el-form-item>
        <el-form-item label="机操护士确认时间" prop="macNurseIsSureTime" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.macNurseIsSureTime" class="width220" disabled ></el-input>
        </el-form-item>
        
        <el-form-item label="穿刺操作时间" prop="punctureNurseOperateTime"  v-if="dialog.type==='update'" >
          <el-date-picker v-model="dialog.formData.punctureNurseOperateTime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"/>
        </el-form-item>
        <el-form-item label="穿刺护士是否确认" prop="punctureNurseIsSure"  v-if="dialog.type==='update'" >
          <el-select v-model="dialog.formData.punctureNurseIsSure"> 
            <el-option label="是" :value=1  > </el-option>
            <el-option label="否" :value=0  > </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机操护士" prop="punctureNurseName" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.punctureNurseName" class="width220" disabled></el-input>
        </el-form-item>
        <el-form-item label="机操护士确认时间" prop="punctureNurseIsSureTime" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.punctureNurseIsSureTime" class="width220" disabled ></el-input>
        </el-form-item>
        
        <el-form-item label="医生" prop="creatorName" v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.creatorName" disabled class="width220"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime"  v-if="dialog.type==='update'">
          <el-input v-model="dialog.formData.createTime" disabled class="width220"></el-input>
        </el-form-item>
         <el-form-item label="临时医嘱内容" prop="content">
          <VueUeditorWrap v-model="dialog.formData.content" :config="config"></VueUeditorWrap>
        </el-form-item>

        <el-form-item  class="form-item-block text-center">
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </el-form-item>
      </el-form>
      
    </el-dialog>
      </div>
</template>
<script>
 import api from 'plugins/axios/api.js';
import {selectDoctorAdvice,updateDoctorAdvice,addDoctorAdvice,getDoctorAdviceProvider} from "plugins/axios/inquiryRecord.js"
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components:{
      VueUeditorWrap
    },
    data (){
        return {

            config: {
                    autoHeightEnabled: false,
                    initialFrameHeight: 500,
                    initialFrameWidth: '100%',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    autoFloatEnabled: true,　　//是否工具栏可浮动
                    initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
                    autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
                    BaseUrl: '',
                    serverUrl: `${process.env.VUE_APP_API_HOST}/mh/ueditor/config`,
                    // serverUrl: `http://192.168.0.83:8891/mh/ueditor/config`,
                    
                    UEDITOR_HOME_URL: '/ueditor/'
                  },
           search:{
                  startTime:'',
                  endTime:'',
                  name:'',
                  providerId:'',
                  time:'',
                  },
            loading:false,
            tableList:[],
            pagination:{/**分页参数 */
                currentPage:1,
                pageSize:10,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                type:'',
                formData:{
                  providerInfo:{
                    name:'',
                    cardId:'',
                   }
                },
               
            },
            rules: {
                 name: [
                         { required: true, message: '请填写产品名称', trigger: 'change' }
                       ],
                 type:[
                       { required: true, message: '请选择产品类型', trigger: 'change' }
                 ]      
            }
        }
    },
    created(){},
    mounted(){
    this.getTableList();
  },
  computed:{
    tableHeight(){
      return this.$store.state.clientHeight-184;
    }
  },
  watch: {
  },
  methods: {

    queryRegAsync(queryString, callback){
     getDoctorAdviceProvider().then(res=>{
                  res.content.forEach(item=>{
                  item.value = item.providerNoName;
                  })
              callback(res.content);
       })
    },
    handleSelectReg(item){
      let self=this;
      self.dialog.formData.providerId=item.providerNo;
      self.dialog.formData.registerNo=item.registerNo;
       self.dialog.formData.providerInfo.name=item.providerNoName;
       self.dialog.formData.providerInfo.cardId=item.cardId;
    },
    cleanSearch(){
      let self =this;
      self.search={
                 startTime:'',
                  endTime:'',
                  name:'',
                  providerId:'',
                  time:'',
      }
    },
      querySearchAsync(queryString, callback){
        api.getProviderByKeyWord({keyWord:queryString?queryString:''}).then(res=>{
            res.content.forEach(item=>{
            item.value =  item.name;
            })
            callback(res.content);
        })
    },
    handleSelect(item){
      let self=this;
      self.search.providerId=item.id;
      self.search.name=item.name;
    },
     handleSizeChange(size){/**切换分页条数 */
      this.pagination.pageSize=size;
      this.pagination.currentPage=1;
      this.getTableList();
    },
      getTableList(){
      let self = this;
         if(self.search.time.length>0){
           self.search.startTime=self.search.time[0];
           self.search.endTime=self.search.time[1];
         }
      let data={
        currentPage:self.pagination.currentPage,
        pageSize:self.pagination.pageSize,
        providerId:self.search.providerId,
        startTime:self.search.time[0],
        endTime:self.search.time[1],
      }
     
     selectDoctorAdvice(data).then(res=>{
        self.tableList = res.content.records;
        self.pagination.currentPage=res.content.current;
        self.pagination.pageSize=res.content.size;
        self.pagination.total=res.content.total;
         
      })
      
    },
    handleCurrentChange(current){/**切换分页页数 */
      this.pagination.currentPage=current;
      this.getTableList();
    },
    searchBtn(){
        this.getTableList()
    },
    showDialog(type,row){
      let self = this;
      self.dialog.type = type;
      self.dialog.isShow = true;
      switch(type){
        case 'insert':
          self.dialog.title = '新增临时医嘱'
          self.dialog.formData={
                  providerInfo:{
                    name:'',
                    cardId:''
                   }
           }
          break;
        case 'update':
          self.dialog.title = '修改临时医嘱'
          self.dialog.formData=JSON.parse(JSON.stringify(row));
          break; 
      }
    },
    onSubmit(){
     let self = this;
     self.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if(self.dialog.type==='insert'){
              addDoctorAdvice(self.dialog.formData).then(res=>{
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
            })   
            }
            if(self.dialog.type==='update'){
               updateDoctorAdvice(self.dialog.formData).then(res=>{
                self.$message.success(`${self.dialog.title}成功`);
                self.dialog.isShow = false;
                self.getTableList();
               }) 
            }
          } else {
           this.$message({
                 message: '提交失败',
                 type: 'warning'
            });
            return false;
          }
        });
        
    },
    
  
  },
  
}
    
</script>
<style scoped>

</style>   